import { FC, useEffect, useState } from "react";

// 引入资源
import styles from './styles.module.scss'
import { Carousel } from "antd";
import { useNavigate } from "react-router-dom";
// 引入请求
import { reqBanner } from "../../api/Banner";

// 引入响应数据类型
import { result, NavListType } from '../../api/Banner/type'
import classNames from "classnames";


interface Props {
    NavList?: NavListType[]
}


const Banner: FC<Props> = (props) => {

    const { NavList } = props

    const [bannerList, setBannerList] = useState<result[]>()
    const [categoryList, setCategoryList] = useState<NavListType>()
    const [showCategory, setShowCategory] = useState(false)

    const Navigate = useNavigate()
    // 获取banner
    const getBanner = () => {
        reqBanner().then((res) => {
            setBannerList(res.result)
        })
    }

    // 切换二级菜单内容
    const changeCategory = (nav: NavListType) => {
        setCategoryList(nav)
        setShowCategory(true)
    }

    // 跳转

    const goToCategorySub = (id: string) => {
        Navigate(`/category/sub?id=${id}`, {
            replace: false
        })
    }

    // 跳转商品详细

    const goToGoodsInfo = (id: string) => {
        Navigate(`/product?id=${id}`, {
            replace: false
        })
    }


    useEffect(() => {
        getBanner()
        console.log('NavList', NavList)



    }, []); // 空依赖数组，表示只在组件挂载时调用 


    if (NavList) {
        return (

            <div className={styles.container}>
                <div className={styles.Banner} onMouseLeave={() => {
                    setShowCategory(false)
                    setCategoryList(
                        {
                            id: '',
                            name: '',
                            picture: '',
                            children: [],
                            goods: []
                        }
                    )
                }}>
                    <div className={styles.menu} >
                        <ul>
                            {
                                NavList?.map((nav) => {
                                    return (
                                        <li key={nav.id} onMouseEnter={() => { changeCategory(nav) }} className={classNames({ [styles.active]: nav.id === categoryList?.id })}>
                                            <span>{nav.name}</span>
                                            <span onClick={() => {
                                                goToCategorySub(nav.children[0].id)
                                            }}>{nav.children[0].name}</span>
                                            <span onClick={() => {
                                                goToCategorySub(nav.children[1].id)
                                            }}>{nav.children[1]?.name}</span>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                    <div className={classNames(styles.content, { [styles.show]: showCategory })}>
                        <div className={styles.title}>
                            <span>分类推荐</span>
                            <span>根据您的浏览和购买记录推荐</span>
                        </div>
                        <div className={styles.box}>
                            {
                                categoryList?.goods?.map((item) => {
                                    return (
                                        <div key={item.id} onClick={() => {
                                            goToGoodsInfo(item.id)
                                        }} >
                                            <img src={item.picture} alt="" />
                                            <span>
                                                <span>{item.name}</span>
                                                <span>{item.desc}</span>
                                                <span>￥{item.price}</span>
                                            </span>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <Carousel
                        autoplay
                        infinite
                        effect="fade"
                        className={styles.Carousel}


                    >
                        {

                            bannerList?.map((banner: result) => {
                                return (
                                    <img key={banner.id} src={banner.imgUrl} alt="banner" />
                                )
                            })
                        }
                    </Carousel>
                </div>
            </div>
        )
    }
    else {
        return (
            <div className={styles.container}>
                <div className={styles.Banner} >
                    <Carousel
                        autoplay
                        infinite
                        effect="fade"
                        className={styles.Carousel}


                    >
                        {

                            bannerList?.map((banner: result) => {
                                return (
                                    <img key={banner.id} src={banner.imgUrl} alt="banner" />
                                )
                            })
                        }
                    </Carousel>
                </div>
            </div>
        )
    }

}


export default Banner